<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Slide Out Navigation</title>
<script type='text/javascript' src='../../vendor/jquery-1.11.0.min.js'></script>
<style type="text/css">
body{ font-family:arial;}
ul#navigation {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: fixed;
    right: 10px;
    top: 0;
    width: 721px;
    z-index: 999999;
}
ul#navigation li {
    display: inline;
    float: left;
    width: 103px;
}
ul#navigation li a {
    background-color: #E7F2F9;
    background-position: 50% 10px;
    background-repeat: no-repeat;
    border: 1px solid #BDDCEF;
    border-radius: 0 0 10px 10px;
    display: block;
    float: left;
    height: 25px;
    margin-top: -2px;
    opacity: 0.7;
    padding-top: 80px;
    text-align: center;
    text-decoration: none;
	line-height:25px;
    width: 100px;
	font-size:11px;
    color: #60ACD8;
    letter-spacing: 2px;
    text-shadow: 0 -1px 1px #FFFFFF;
}
ul#navigation li a:hover {
    background-color: #CAE3F2;
}
ul#navigation .home a {
    background: url([url]http://tympanus.net/Tutorials/FixedNavigationTutorial2/images/home.png[/url]) no-repeat;
}
ul#navigation .about a {
    background: url([url]http://tympanus.net/Tutorials/FixedNavigationTutorial2/images/id_card.png[/url]) no-repeat;
}
ul#navigation .search a {
    background: url([url]http://tympanus.net/Tutorials/FixedNavigationTutorial2/images/search.png[/url]) no-repeat;
}
ul#navigation .podcasts a {
    background: url([url]http://tympanus.net/Tutorials/FixedNavigationTutorial2/images/ipod.png[/url]) no-repeat;
}
ul#navigation .rssfeed a {
    background: url([url]http://tympanus.net/Tutorials/FixedNavigationTutorial2/images/rss.png[/url]) no-repeat;
}
ul#navigation .photos a {
    background: url([url]http://tympanus.net/Tutorials/FixedNavigationTutorial2/images/camera.png[/url]) no-repeat;
}
ul#navigation .contact a {
    background: url([url]http://tympanus.net/Tutorials/FixedNavigationTutorial2/images/mail.png[/url]) no-repeat;
}

</style>
</head>
<body>
<ul id="navigation">
      <li class="home"><a href="">Home</a></li>
      <li class="about"><a href="">About</a></li>
      <li class="search"><a href="">Search</a></li>
      <li class="photos"><a href="">Photos</a></li>
      <li class="rssfeed"><a href="">Rss Feed</a></li>
      <li class="podcasts"><a href="">Podcasts</a></li>
      <li class="contact"><a href="">Contact</a></li>
</ul>
<script type="text/javascript">
$(function() {
      var d=300;
      $('#navigation a').each(function(){
      $(this).stop().animate({
      'marginTop':'-80px'
      },d+=150);
      });
      $('#navigation > li').hover(
      function () {
      $('a',$(this)).stop().animate({
      'marginTop':'-2px'
      },200);
      },
      function () {
      $('a',$(this)).stop().animate({
      'marginTop':'-80px'
      },200);
      }
      );
      });
</script>
</body>
</html>